Using jsPsych and cognition.run

Session 2 - intermediate

Translations available

Disclaimer: may not be very accurate…

Worksheet overview

Aims

By the end of this worksheet you should be able to:

  • program your own experiments in jsPsych
  • host the experiment online using cognition.run
  • use the participant data for analysis
  • apply the basic skills you have learnt for your own purposes
  • learn some extra skills such as HTML, javascript, CSS and JSON

Pre-requisites

To complete the aims you will need to:

  • follow this worksheet
  • ask questions if you are not sure/be able to google
  • have a working computer and internet connection
  • be patient when things do not work

You do not need to:

  • have any programming knowledge
  • have high computer literacy
  • know anything about jsPsych, cognition.run, html, css or javascript
  • be a linguist

Structure

The worksheet will go through the following sections:

  • Introducing cognition.run

    • creating an account
    • considerations when using it
    • familiarisation with the interface

  • Introducing jsPsych

    • what it is
    • considerations when using it
    • using official documentation

  • Running experiments

    • integrating JsPsych with cognition.run
    • familiarisation with JsPsych programming
    • building a very simple experiment

Up next

In the next sessions we will cover:

  • building a proper experiment
  • using stimuli files
  • customising plugins
  • customising appearance
  • working with the data

Recap

In the last session we should have:

  • set up an account for cognition.run
  • become familiar with the cognition.run interface
  • become familiar with JsPsych
  • learnt what a plugin is and how they work
  • built a very simple experiment
LS0tCnRpdGxlOiAiVXNpbmcganNQc3ljaCBhbmQgY29nbml0aW9uLnJ1biIKc3VidGl0bGU6ICJTZXNzaW9uIDIgLSBpbnRlcm1lZGlhdGUiCmF1dGhvcjogIkphbWVzIEJyYW5kIgpkYXRlOiAiYHIgZm9ybWF0KFN5cy50aW1lKCksICclZCAlQiwgJVknKWAiCm91dHB1dDoKICBybWRmb3JtYXRzOjpyZWFkdGhlZG93bjoKICAgIHBhbmRvY19hcmdzOiAiLS1oaWdobGlnaHQtc3R5bGU9bXkudGhlbWUiCiAgICBoaWdobGlnaHQ6IHB5Z21lbnRzCiAgICB0b2NfZmxvYXQ6IHRydWUKICAgIGNvZGVfZG93bmxvYWQ6IHRydWUKICAgIHRvY19kZXB0aDogMwogICAgY29sbGFwc2VkOiBmYWxzZQogICAgZGZfcHJpbnQ6IHBhZ2VkCiAgICBsaWdodGJveDogVFJVRQogICAgZ2FsbGVyeTogVFJVRQogICAgY3NzOiAiY3NzL3N0eWxlLmNzcyIKICAgIAotLS0KCmBgYHtyIGVjaG89RkFMU0UsIHdhcm5pbmc9RkFMU0V9CmxpYnJhcnkoc2xpY2tSKQpsaWJyYXJ5KGh0bWx0b29scykKbGlicmFyeSh4YXJpbmdhbkV4dHJhKQpsaWJyYXJ5KHJtYXJrZG93bikKbGlicmFyeShmb250YXdlc29tZSkKbGlicmFyeShic3BsdXMpCgpgYGAKCmBgYHtyIHNldHVwLCB3YXJuaW5nPUZBTFNFLCBlY2hvPUZBTFNFfQprbml0cjo6b3B0c19jaHVuayRzZXQoZWNobyA9IFRSVUUsCiAgICAgICAgICAgICAgICAgICAgICBldmFsID0gRkFMU0UsCiAgICAgICAgICAgICAgICAgICAgICBjb21tZW50ID0gTkEpCgprbml0cjo6a25pdF9ob29rcyRzZXQoCiAgbWVzc2FnZSA9IGZ1bmN0aW9uKHgsIG9wdGlvbnMpIHsKICAgICBwYXN0ZSgnPGJ1dHRvbiB0eXBlPSJidXR0b24iIGNsYXNzPSJjb2xsYXBzaWJsZTEiPjxzdHJvbmc+JywKICAgICBmYShuYW1lID0gImNpcmNsZS1pbmZvIiksCiAgICAgJyBtb3JlIGluZm88L3N0cm9uZz48L2J1dHRvbj4nLCAnPGRpdiBjbGFzcz0iY29udGVudDEiPjxwPicsCiAgICAgZ3N1YignIyMnLCAnXG4nLCB4KSwKICAgICAnPC9wPjwvZGl2PicsCiAgICAgc2VwID0gJ1xuJykKICAgfSkKCmNvZGVibG9jayA9IGZ1bmN0aW9uKHgsIG9wdGlvbnMpIHsKICAgICBjYXQocGFzdGUoJzxkaXYgY2xhc3M9ImNvZGVibG9jayI+JywKICAgICBwYXN0ZTAoeCksCiAgICAgJzwvZGl2PicsCiAgICAgc2VwID0gJ1xuJykpCiAgIH0KCmBgYAoKLS0tCgojIyBgciBmYSgibGFuZ3VhZ2UiKWAgVHJhbnNsYXRpb25zIGF2YWlsYWJsZQoKRGlzY2xhaW1lcjogbWF5IG5vdCBiZSB2ZXJ5IGFjY3VyYXRlLi4uCgo8ZGl2IGlkPSJnb29nbGVfdHJhbnNsYXRlX2VsZW1lbnQiPjwvZGl2PgoKLS0tCgojIFdvcmtzaGVldCBvdmVydmlldwoKIyMgYHIgZmEoImNyb3NzaGFpcnMiKWAgQWltcwoKQnkgdGhlIGVuZCBvZiB0aGlzIHdvcmtzaGVldCB5b3Ugc2hvdWxkIGJlIGFibGUgdG86CgotICoqcHJvZ3JhbSoqIHlvdXIgb3duIGV4cGVyaW1lbnRzIGluIGpzUHN5Y2gKLSAqKmhvc3QqKiB0aGUgZXhwZXJpbWVudCBvbmxpbmUgdXNpbmcgY29nbml0aW9uLnJ1bgotICoqdXNlKiogdGhlIHBhcnRpY2lwYW50IGRhdGEgZm9yIGFuYWx5c2lzCi0gKiphcHBseSoqIHRoZSBiYXNpYyBza2lsbHMgeW91IGhhdmUgbGVhcm50IGZvciB5b3VyIG93biBwdXJwb3NlcwotICoqbGVhcm4qKiBzb21lIGV4dHJhIHNraWxscyBzdWNoIGFzIEhUTUwsIGphdmFzY3JpcHQsIENTUyBhbmQgSlNPTgoKIyMgYHIgZmEoInVzZXItZ3JhZHVhdGUiKWAgUHJlLXJlcXVpc2l0ZXMKClRvIGNvbXBsZXRlIHRoZSBhaW1zIHlvdSB3aWxsIG5lZWQgdG86CgotICoqZm9sbG93KiogdGhpcyB3b3Jrc2hlZXQKLSAqKmFzayoqIHF1ZXN0aW9ucyBpZiB5b3UgYXJlIG5vdCBzdXJlL2JlIGFibGUgdG8gZ29vZ2xlCi0gKipoYXZlKiogYSB3b3JraW5nIGNvbXB1dGVyIGFuZCBpbnRlcm5ldCBjb25uZWN0aW9uCi0gKipiZSBwYXRpZW50Kiogd2hlbiB0aGluZ3MgZG8gbm90IHdvcmsKCllvdSBkbyBub3QgbmVlZCB0bzoKCi0gaGF2ZSBhbnkgKipwcm9ncmFtbWluZyBrbm93bGVkZ2UqKgotIGhhdmUgaGlnaCAqKmNvbXB1dGVyIGxpdGVyYWN5KioKLSBrbm93IGFueXRoaW5nIGFib3V0ICoqanNQc3ljaCwgY29nbml0aW9uLnJ1biwgaHRtbCwgY3NzIG9yIGphdmFzY3JpcHQqKgotIGJlIGEgKipsaW5ndWlzdCoqCgojIyBgciBmYSgiZm9sZGVyLXRyZWUiKWAgU3RydWN0dXJlCgpUaGUgd29ya3NoZWV0IHdpbGwgZ28gdGhyb3VnaCB0aGUgZm9sbG93aW5nIHNlY3Rpb25zOgoKLSBJbnRyb2R1Y2luZyBjb2duaXRpb24ucnVuCgogICAgLSBjcmVhdGluZyBhbiBhY2NvdW50CiAgICAtIGNvbnNpZGVyYXRpb25zIHdoZW4gdXNpbmcgaXQKICAgIC0gZmFtaWxpYXJpc2F0aW9uIHdpdGggdGhlIGludGVyZmFjZQo8YnIvPjxici8+Ci0gSW50cm9kdWNpbmcganNQc3ljaAoKICAgIC0gd2hhdCBpdCBpcwogICAgLSBjb25zaWRlcmF0aW9ucyB3aGVuIHVzaW5nIGl0CiAgICAtIHVzaW5nIG9mZmljaWFsIGRvY3VtZW50YXRpb24KPGJyLz48YnIvPgotIFJ1bm5pbmcgZXhwZXJpbWVudHMKCiAgICAtIGludGVncmF0aW5nIEpzUHN5Y2ggd2l0aCBjb2duaXRpb24ucnVuCiAgICAtIGZhbWlsaWFyaXNhdGlvbiB3aXRoIEpzUHN5Y2ggcHJvZ3JhbW1pbmcKICAgIC0gYnVpbGRpbmcgYSB2ZXJ5IHNpbXBsZSBleHBlcmltZW50CgojIyBgciBmYSgiYXJyb3ctcmlnaHQiKWAgVXAgbmV4dAoKSW4gdGhlIG5leHQgc2Vzc2lvbnMgd2Ugd2lsbCBjb3ZlcjoKCi0gYnVpbGRpbmcgYSBwcm9wZXIgZXhwZXJpbWVudAotIHVzaW5nIHN0aW11bGkgZmlsZXMKLSBjdXN0b21pc2luZyBwbHVnaW5zCi0gY3VzdG9taXNpbmcgYXBwZWFyYW5jZQotIHdvcmtpbmcgd2l0aCB0aGUgZGF0YQoKIyMgYHIgZmEoImJhY2t3YXJkIilgIFJlY2FwCgpJbiB0aGUgbGFzdCBzZXNzaW9uIHdlIHNob3VsZCBoYXZlOgoKLSBzZXQgdXAgYW4gYWNjb3VudCBmb3IgY29nbml0aW9uLnJ1bgotIGJlY29tZSBmYW1pbGlhciB3aXRoIHRoZSBjb2duaXRpb24ucnVuIGludGVyZmFjZQotIGJlY29tZSBmYW1pbGlhciB3aXRoIEpzUHN5Y2gKLSBsZWFybnQgd2hhdCBhIHBsdWdpbiBpcyBhbmQgaG93IHRoZXkgd29yawotIGJ1aWx0IGEgdmVyeSBzaW1wbGUgZXhwZXJpbWVudAoKLS0tCgoKCgoKCgoKYGBge3IgZWNobz1GQUxTRSwgZXZhbD1UUlVFLCB3YXJuaW5nPUZBTFNFfQpodG1sdG9vbHM6OnRhZ3Mkc2NyaXB0KHNyYyA9ICJqcy90cmFuc2xhdGUuanMiKQojIGh0bWx0b29sczo6dGFncyRzY3JpcHQoc3JjID0gImpzL2luZm9ib3guanMiKQpodG1sdG9vbHM6OnRhZ3Mkc2NyaXB0KHNyYz0iLy90cmFuc2xhdGUuZ29vZ2xlLmNvbS90cmFuc2xhdGVfYS9lbGVtZW50LmpzP2NiPWdvb2dsZVRyYW5zbGF0ZUVsZW1lbnRJbml0IikKCmh0bWx0b29sczo6dGFnTGlzdCgKICB4YXJpbmdhbkV4dHJhOjp1c2VfY2xpcGJvYXJkKAogICAgYnV0dG9uX3RleHQgPSAiPGkgY2xhc3M9XCJmYSBmYS1jbGlwYm9hcmRcIiBzdHlsZT1cImZvbnQtc2l6ZTogMjVweFwiPjwvaT4iLAogICAgc3VjY2Vzc190ZXh0ID0gIjxpIGNsYXNzPVwiZmEgZmEtY2hlY2tcIiBzdHlsZT1cImNvbG9yOiAjOTBCRTZEOyBmb250LXNpemU6IDI1cHhcIj48L2k+IiwKICApLAogIHJtYXJrZG93bjo6aHRtbF9kZXBlbmRlbmN5X2ZvbnRfYXdlc29tZSgpCikKCmBgYAoKYGBge2pzIGVjaG89RkFMU0UsIGV2YWw9VFJVRX0KdmFyIGNvbGwgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5Q2xhc3NOYW1lKCJjb2xsYXBzaWJsZTEiKTsKdmFyIGk7Cgpmb3IgKGkgPSAwOyBpIDwgY29sbC5sZW5ndGg7IGkrKykgewogIGNvbGxbaV0uYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbigpIHsKICAgIHRoaXMuY2xhc3NMaXN0LnRvZ2dsZSgiYWN0aXZlMSIpOwogICAgdmFyIGNvbnRlbnQgPSB0aGlzLm5leHRFbGVtZW50U2libGluZzsKICAgIGlmIChjb250ZW50LnN0eWxlLm1heEhlaWdodCl7CiAgICAgIGNvbnRlbnQuc3R5bGUubWF4SGVpZ2h0ID0gbnVsbDsKICAgIH0gZWxzZSB7CiAgICAgIGNvbnRlbnQuc3R5bGUubWF4SGVpZ2h0ID0gY29udGVudC5zY3JvbGxIZWlnaHQgKyAicHgiOwogICAgfQogIH0pOwp9CgpgYGAK